
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>文字2</title>
</head>
<body >
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa">
    您的浏览器不支持canvas
</canvas>
<script>
    window.onload=function(){
        var canvas=document.getElementById("canvas");
        canvas.width=800;
        canvas.height=800;
        var context=canvas.getContext("2d");
        context.fillStyle="#058";
        context.font="bold 40px sans-serif";

       /* context.textAlign="left";
        context.fillText("textAlign=left",400,100);

         context.textAlign="center";
        context.fillText("textAlign=center",400,200);
        context.textAlign="right";
        context.fillText("textAlign=right",400,300);

        //baseline
        context.strokeStyle="#888";
        context.moveTo(400,0);
        context.lineTo(400,800);
        context.stroke();*/
        context.textBaseline="top";
        context.fillText("人生若只如初见，何事秋风悲画扇",40,100);
        drawBaseline(context,100);

        context.textBaseline="middle";
        context.fillText("人生若只如初见，何事秋风悲画扇",40,200);
        drawBaseline(context,200);

        context.textBaseline="bottom";
        context.fillText("人生若只如初见，何事秋风悲画扇",40,300);
        drawBaseline(context,300);

        context.textBaseline="alphabetic";
        context.fillText("人生若只如初见，qwertyuiasdfghjzxcvbn",40,400);
        drawBaseline(context,400);

        context.textBaseline="ideographic";
        context.fillText("人生若只如初见，qwertyuiasdfghjzxcvbn",40,500);
        drawBaseline(context,500);

        context.textBaseline="hanging";
        context.fillText("人生若只如初见，qwertyuiasdfghjzxcvbn",40,600);
        drawBaseline(context,600);

        function  drawBaseline(cxt,h){
            var width=cxt.canvas.width;

            cxt.save();
            cxt.strokeStyle="#888";
            cxt.lineWidth=2;
            cxt.moveTo(0,h);
            cxt.lineTo(width,h);
            cxt.stroke();
            cxt.restore();

        }
    }
</script>
</body>
</html>